<template>
  <div class="likes-container">
    <div class="page-header">
      <h2 class="page-title">我的点赞</h2>
    </div>

    <div class="content-list">
      <a-list :data-source="likesList">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card class="like-card" :bordered="false">
            <a-list-item-meta>
              <a-avatar 
                slot="avatar" 
                style="background-color: #1890ff"
              >
                {{ item.username ? item.username.charAt(0) : 'U' }}
              </a-avatar>
              <template slot="title">
                <a @click="goToUserProfile(item.userId)">{{ item.username }}</a>
              </template>
              <template slot="description">
                <div class="content-preview" @click="goToDetail(item.id)">
                  {{ item.content }}
                </div>
                <div class="interaction-stats">
                  <span class="stat-item">
                    <a-icon type="eye" />
                    {{ item.viewCount || 0 }} 浏览
                  </span>
                  <span class="stat-item">
                    <a-icon type="message" />
                    {{ item.commentCount || 0 }} 评论
                  </span>
                  <span class="stat-item">
                    <a-icon type="heart" theme="filled" style="color: #ff4d4f"/>
                    {{ item.likeCount || 0 }} 点赞
                  </span>
                </div>
              </template>
            </a-list-item-meta>
            <template slot="extra">
              <span class="like-time">{{ item.createTime }}</span>
            </template>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Likes',
  data() {
    return {
      likesList: [
        {
          id: 1,
          userId: '1',
          username: '张三',
          content: '今天学习了Vue.js的组件通信，收获很多！分享一下我的学习心得：1. props和emit是最基本的父子组件通信方式 2. vuex适合复杂的状态管理 3. event bus要谨慎使用...',
          createTime: '2023-12-10 14:30',
          viewCount: 156,
          commentCount: 23,
          likeCount: 45
        },
        {
          id: 2,
          userId: '2',
          username: '李四',
          content: '分享一个算法题解：「两数之和」的三种解法对比。1. 暴力解法 O(n²) 2. 哈希表优化 O(n) 3. 双指针解法（需要排序）O(nlogn)。个人推荐使用哈希表解法，时间复杂度和空间复杂度都比较均衡。',
          createTime: '2023-12-10 15:45',
          viewCount: 234,
          commentCount: 18,
          likeCount: 67
        },
        {
          id: 3,
          userId: '3',
          username: '王五',
          content: '最近在研究Spring Boot的自动配置原理，发现@EnableAutoConfiguration注解背后的魔法真的很有意思。它通过spring.factories机制，实现了外部依赖的自动装配，大大简化了我们的开发工作。',
          createTime: '2023-12-10 16:20',
          viewCount: 189,
          commentCount: 15,
          likeCount: 38
        }
      ]
    }
  },
  methods: {
    goToUserProfile(userId) {
      if (userId) {
        this.$router.push(`/profile/${userId}`)
      }
    },
    goToDetail(id) {
      if (id) {
        this.$router.push(`/social/${id}`)
      }
    }
  }
}
</script>

<style scoped>
.likes-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.content-list {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.like-card {
  width: 100%;
  margin-bottom: 16px;
}

.like-card:hover {
  background: #fafafa;
}

.like-time {
  color: #6b7280;
  font-size: 14px;
}

.content-preview {
  cursor: pointer;
  color: #1f2937;
  margin: 12px 0;
}

.content-preview:hover {
  color: #1890ff;
}

.interaction-stats {
  margin-top: 12px;
  display: flex;
  gap: 24px;
}

.stat-item {
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .likes-container {
    padding: 16px;
  }
  
  .content-list {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}
</style> 